<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 21 loading a sprite sheet</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
<!--<script src="pixi.dev.js"></script>-->
</head>
<body>
<script>
// create an array of assets to load
// holder to store aliens
var aliens = [];
var alienFrames = ["eggHead.png", "flowerTop.png", "helmlok.png", "skully.png"];
var count = 0;
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x3da8bb);
// create a renderer instance.
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
// create an empty container
var alienContainer = new PIXI.DisplayObjectContainer();
alienContainer.position.x = 400;
alienContainer.position.y = 300;
stage.addChild(alienContainer);
count = 0;
// start animating
requestAnimFrame(animate);
var graphics = new PIXI.Graphics().beginFill(0xFF0000);//.moveTo(-200, -300).lineTo(200, -300).lineTo(220,100).lineTo(200,300).lineTo(-200,300).endFill();
var liveGraphics = new PIXI.Graphics().beginFill(0xFF0000);
var path = [];
stage.interactive = true;
var isDown = false;
var color = 0;
var colors = [0x5D0776, 0xEC8A49, 0xAF3666, 0xF6C84C, 0x4C779A];
var colorCount = 0;
var label = new PIXI.Text("Click and drag anywhere do draw complex geometry in pixi / do an art attack", {fill:"white", font:"16px Arial"});
label.x = 10;
label.y = 10;
for (var i = 0; i < 100; i++)
{
var frameName = alienFrames[i % 4];
// create an alien using the frame name..
var alien = PIXI.Sprite.fromImage(frameName);
alien.tint = Math.random() * 0xFFFFFF;
/*
* fun fact for the day :)
* another way of doing the above would be
* var texture = PIXI.Texture.fromFrame(frameName);
* var alien = new PIXI.Sprite(texture);
*/
alien.position.x = Math.random() * 800 - 400;
alien.position.y = Math.random() * 600 - 300;
alien.anchor.x = 0.5;
alien.anchor.y = 0.5;
aliens.push(alien);
alienContainer.addChild(alien);
}
stage.mousedown = function(data)
{
isDown = true;
path = [];
color = colors[colorCount++ % colors.length]
// liveGraphics.clear().beginFill(color);
// liveGraphics.drawCircle(data.global.x, data.global.y, 030);
}
stage.mousemove = function(data)
{
if(!isDown)return;
path.push(data.global.x);
path.push(data.global.y);
liveGraphics.clear();
liveGraphics.beginFill(color);
if(path.length > 12)liveGraphics.drawPolygon(path);
liveGraphics.endFill();
//console.log(">>>>")
}
stage.mouseup = function()
{
isDown = false;
graphics.beginFill(color);
graphics.drawPolygon(path)
graphics.endFill();
path = [];
}
graphics.mask = liveGraphics;
// graphics.drawPolygon(path);
stage.addChild(graphics);
stage.addChild(liveGraphics);
stage.addChild(label);
function animate() {
count += 0.1;
// render the stage
renderer.render(stage);
// graphics.x = 300;
// graphics.y = 399
requestAnimFrame(animate);
}
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = window.innerWidth
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = window.innerHeight - 70;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
</script>
</body>
</html>
